/*
* 城市交易图
* */
import echart from 'echarts'

const drawTrade = (title, xData, yData) => {
  let option = {
    dataZoom: [
      {
        type: 'slider',
        show: true,
        xAxisIndex: [0],
        handleSize: '120%', // 滑动条的 左右2个滑动条的大小
        height: 8, // 组件高度
        left: 30, // 左边的距离
        right: 40, // 右边的距离
        bottom: 30, // 底部的距离
        handleColor: '#ddd', // 滑动图标的颜色
        handleStyle: {
          borderColor: '#cacaca',
          borderWidth: '1',
          shadowBlur: 2,
          background: '#ddd',
          shadowColor: '#ddd'
        },
        fillerColor: new echart.graphic.LinearGradient(1, 0, 0, 0, [{
          offset: 0,
          color: 'rgba(80,227,194, 0.3)'
        }, {
          offset: 1,
          color: 'rgba(80,227,194, 1)'
        }]),
        backgroundColor: '#d8d8d8', // 两边未选中的滑动条区域的颜色
        showDataShadow: false, // 是否显示数据阴影 默认auto
        showDetail: false, // 即拖拽时候是否显示详细数值信息 默认true
        handleIcon: 'M-292,322.2c-3.2,0-6.4-0.6-9.3-1.9c-2.9-1.2-5.4-2.9-7.6-5.1s-3.9-4.8-5.1-7.6c-1.3-3-1.9-6.1-1.9-9.3c0-3.2,0.6-6.4,1.9-9.3c1.2-2.9,2.9-5.4,5.1-7.6s4.8-3.9,7.6-5.1c3-1.3,6.1-1.9,9.3-1.9c3.2,0,6.4,0.6,9.3,1.9c2.9,1.2,5.4,2.9,7.6,5.1s3.9,4.8,5.1,7.6c1.3,3,1.9,6.1,1.9,9.3c0,3.2-0.6,6.4-1.9,9.3c-1.2,2.9-2.9,5.4-5.1,7.6s-4.8,3.9-7.6,5.1C-285.6,321.5-288.8,322.2-292,322.2z',
        filterMode: 'filter'
      },
      // 下面这个属性是里面拖到
      {
        type: 'inside',
        show: false,
        xAxisIndex: [0],
        start: 1,
        end: 20
      }
    ],
    title: {
      text: title,
      top: '8%',
      left: '5%',
      textStyle: {
        color: '#50E3C2'
      }
    },
    tooltip: {
      trigger: 'axis', axisPointer: {type: 'shadow'}
    },
    grid: {left: '5%', top: '28%', containLabel: true},
    yAxis: {
      type: 'value',
      axisLabel: {
        color: '#fff'
      },
      splitLine: {
        lineStyle: {
          type: 'dashed',
          color: ['rgba(96, 96, 96, 0.8)']
        }
      }
    },
    xAxis: {
      type: 'category',
      data: xData,
      axisLabel: {
        interval: 0,
        rotate: 45,
        color: '#fff'
      }
    },
    series: [
      {
        name: '交易笔数',
        type: 'bar',
        data: yData,
        itemStyle: {
          normal: {
            color: new echart.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: 'rgba(80, 227, 194, 0.6)'
              },
              {
                offset: 0.2,
                color: 'rgba(80, 227, 194, 0.8)'
              },
              {
                offset: '1',
                color: 'rgba(80, 227, 194, 1)'
              }
            ]),
            barBorderRadius: [20, 20, 0, 0]
          }
        }
      }
    ]
  }
  let trade = echart.init(document.getElementById('allTrade'))
  trade.setOption(option, true)
  window.addEventListener('resize', function () {
    trade.resize()
  })
}

export default drawTrade
